import React, { Component } from 'react'

import { Card} from 'antd'
import Axios from './../../axios'

import './detail.less'


export default class detail extends Component {
    state = {}
    componentDidMount() {
        let orderId = this.props.match.params.orderId;
        if (orderId) {
            this.getDetailInfo(orderId);
        }
    }
    getDetailInfo = (orderId) => {
        Axios.ajax({
            url: "/order/detail",
               data:{
                params:{
                  orderId:orderId
                }
               } 
        }).then((res) => {
            if (res.code === "0"||res.code===0) {
                this.setState({
                    orderInfo: res.result
                })
                this.renderMap(res.result);
            }
        })
    }
    // 使用百度地图步骤
    renderMap(result) {
        // 1.初始化地图 声明地图对象
        this.map = new window.BMapGL.Map('orderDetailMap');
        this.map.centerAndZoom(new window.BMapGL.Point(116.404, 39.915), 11);  // 初始化地图,设置中心点坐标和地图级别11是缩放比例
        this.addMapControl();
        //    调用路线图绘制方法
        this.drawBikeRoute(result.position_list);
        //    调用服务区的方法 
        this.drawServiceArea(result.area);
    }
    // 2.添加地图控件 放大或缩小
    addMapControl = () => {
        let map = this.map;
         map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
    
        //   调用添加地图控件的方法  
        map.addControl(new window.BMapGL.ScaleControl());
         // 添加比例尺控件
        map.addControl(new window.BMapGL.ZoomControl()); 
        
    }
    // 3.绘制用户的形式路线图 positionList行驶路程坐标点
    drawBikeRoute = (positionList) => {
        //    获取map对象
        let map = this.map;
        // 3.1起始坐标点
        let startPoint = '';
        // 3.2终止坐标点 
        let endPoint = '';
        //    创建起始的marker
        if (positionList.length > 0) {
            let first = positionList[0];
            let last = positionList[positionList.length - 1];
            startPoint = new window.BMapGL.Point(first.lon, first.lat);
            let startIcon = new window.BMapGL.Icon('/assets/start_point.png', new window.BMapGL.Size(36, 42), {
                imageSize: new window.BMapGL.Size(36, 42),
                anchor: new window.BMapGL.Size(18, 42)
            })
            let startMarker = new window.BMapGL.Marker(startPoint, { icon: startIcon });
            map.addOverlay(startMarker);

            //    创建结束的marker
            endPoint = new window.BMapGL.Point(last.lon, last.lat);
            let endIcon = new window.BMapGL.Icon('/assets/end_point.png', new window.BMapGL.Size(36, 42), {
                imageSize: new window.BMapGL.Size(36, 42),
                anchor: new window.BMapGL.Size(18, 42)
            })
            let endMarker = new window.BMapGL.Marker(endPoint, { icon: endIcon });
            map.addOverlay(endMarker);
            // 连接路线图
            let trackPoint = [];
            for (let i = 0; i < positionList.length; i++) {
                let point = positionList[i];
                trackPoint.push(new window.BMapGL.Point(point.lon, point.lat))
            }
            //    使用polyline 画折线图
            let polyline = new window.BMapGL.Polyline(trackPoint, {
                // 线的颜色 
                strokeColor: '#1869AD',
                strokeWeight: 3,
                strokeOpacity: 1
            })
            map.addOverlay(polyline);
            map.centerAndZoom(endPoint, 11);
        }
    }
    // 绘制服务区
    drawServiceArea = (positionList) => {
        // 连接路线图
        let trackPoint = [];
        for (let i = 0; i < positionList.length; i++) {
            let point = positionList[i];
            trackPoint.push(new window.BMapGL.Point(point.lon, point.lat));
        }
        // 绘制服务区
        let polygon = new window.BMapGL.Polygon(trackPoint, {
            strokeColor: '#CE0000',
            strokeWeight: 4,
            strokeOpacity: 1,
            fillColor: '#ff8605',
            fillOpacity: 0.4
        })
        this.map.addOverlay(polygon);
    }
    render() {
        const info = this.state.orderInfo || {};
        return (
            <div>
                <Card>
                    <div id="orderDetailMap" className="order-map"></div>
                    <div className="detail-items">
                        <div className="item-title">基础信息</div>
                        <ul className="detail-form">
                            <li>
                                <div className="detail-form-left">用车模式</div>
                                <div className="detail-form-right">{info.mode === 1||info.mode === '1' ? '服务区' : '停车点'}</div>
                            </li>
                            <li>
                                <div className="detail-form-left">订单编号</div>
                                <div className="detail-form-right">{info.order_sn}</div>
                            </li>
                            <li>
                                <div className="detail-form-left">车辆编号</div>
                                <div className="detail-form-right">{info.bike_sn}</div>
                            </li>
                            <li>
                                <div className="detail-form-left">用户姓名</div>
                                <div className="detail-form-right">{info.user_name}</div>
                            </li>
                            <li>
                                <div className="detail-form-left">手机号码</div>
                                <div className="detail-form-right">{info.mobile}</div>
                            </li>
                        </ul>
                    </div>
                    <div className="detail-items">
                        <div className="item-title">行驶轨迹</div>
                        <ul className="detail-form">
                            <li>
                                <div className="detail-form-left">行驶起点</div>
                                <div className="detail-form-right">{info.start_location}</div>
                            </li>
                            <li>
                                <div className="detail-form-left">行驶终点</div>
                                <div className="detail-form-right">{info.end_location}</div>
                            </li>
                            <li>
                                <div className="detail-form-left">行驶里程</div>
                                <div className="detail-form-right">{info.distance / 1000}公里</div>
                            </li>
                        </ul>
                    </div>
                </Card>
            </div>
        )
    }
}
